<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {

            height: 100%;
            font-size: 13.33vw;
        }

        .box {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        header {
            height: 0.5rem;
            background-color: aqua;
            display: flex;
        }

        header h2 {
            font-size: 0.2rem;
            text-align: center;
        }

        article {
            width: 100%;
            flex: 1;
            display: flex;
            background-color: beige;
            align-items: center;
            flex-direction: column;
        }

        article input {

            width: 50%;
            height: 0.2rem;
            background-color: aquamarine;
        }

        .btn {
            width: 50%;
            background-color: red;
        }

        footer {
            width: 100%;
            height: 0.6rem;
            background-color: deeppink;
            position: fixed;
            bottom: 0px;
            right: 0px;
        }
    </style>
</head>

<body>
    <div class="#app">
        <header>
            <h2>我的页面</h2>
        </header>
        <article>
            <input type="text" v-model="msg" placeholder="请输入用户名">
            <hr>
            <input class="btn" type="button" value="登录">

        </article>
        <footer></footer>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "",
                // obj:{
                //     name:"张三"
                // }

            },
            //监听data上的数据（特殊情况除外）
            //使用场景：数据修改需要调用后端接口
            watch: {
                //默认参数
                //newValue 当前最新内容
                //oldValue 上一次的内容
                msg(newValue, oldValue) {
                    console.log(newValue, oldValue);
                },
                // obj: {
                //     //深度监听
                //     deep: true,
                //     handler(newValue) {
                //         console.log(newValue);
                //     }
                // }

            }

        })

    </script>
</body>

</html>